<template>
	<view>
		<navbar class="navbar">
			<template #left>
				<span class="iconfont">&#xe652;</span>
			</template>
			<template #center>
				<view class="center_title">
					<text class="center_title_text" @click="onClickItem(index)" v-for="(item,index) in items" :key="index">
						{{item}}
					</text>
				</view>
				<view class="center_title_border" :style="'transform:translateX('+transform[current]+'rpx)'"></view>
			</template>	
			<template #right>
				<span class="iconfont">&#xe651;</span>
			</template>
		</navbar>
		<swiper :style="{ height: swiperHeight + 'px' }" :current="current" class="swiper" @change="EventHandlechange" :interval="interval" :duration="duration">
			<swiper-item class="item">
					<view class="swiper-item uni-bg-red">A</view>
			</swiper-item>
			<swiper-item class="item">
			<!-- 热门区域 -->
				<view class="swiper-item uni-bg-green">
					<ltabelistPosts :dataList="dataList" :likeData="likeData"></ltabelistPosts>
				</view>
			</swiper-item>
			<swiper-item class="item">
				<view class="swiper-item uni-bg-blue">
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import navbar from "@/components/Navbar.vue"
	import ltabelistPosts from "@/components/Popular.vue"
	import { mapState } from 'vuex'//引入mapState
	import { postsResult,queryAll } from '@/api/AddPostsApi.js'
	export default{
		data(){
			return {
				items: ['关注', '发现', '附近'],
				transform:["15","115","215"],
				current: 1,
				background: ['color1', 'color2', 'color3'],
		        indicatorDots: true,
		        interval: 2000,
		        duration: 500,
				dataList:[],
				swiperHeight: 0,
			}
		},
		onLoad() {
			this.swiperHeight = uni.getSystemInfoSync().windowHeight
		},
		created(){
			console.log("获取系统信息",uni.getSystemInfoSync())
			postsResult().then(res => {
				console.log(res.data.data)
				this.dataList = res.data.data
			})
		},
		methods:{
			onClickItem(e) {
				this.current = e
			},
			EventHandlechange(e){
				this.current = e.detail.current
			},	
			likeData(){
				
			}
		},
		components:{
			/* 注册导航栏主 */
			navbar,
			ltabelistPosts,
		},
		computed: mapState({
			// 从state中拿到数据 箭头函数可使代码更简练
			uniscreenHeight: state => state.height,
		})
	}
</script>

<style lang="scss">
.iconfont{
	font-size: 35px;
}
.center_title{	
	width: 300rpx;
	margin-bottom: 10rpx;
}
.center_title_text{
	width: 100rpx;
	box-sizing: border-box;
	display: inline-block;
	line-height: 50rpx;
	font-size: 25rpx;
	text-align: center;	
	color:#000;
}
.center_title_border{
	width: 70rpx;
	margin: 5rpx 0 0 0;
	box-sizing: border-box;
	border-radius: 50rpx;
	border:1px solid red;
	transition: all 1s;
}
.item{
	box-sizing: border-box;
}
</style>